<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useUserCrud} from "./composables/useUserCrud.ts"
import type IFormExpos from "@/components/input/type/expose.ts"
import useSchema from "./composables/useSchema.ts";

const dialogFormRef = ref<IFormExpos | null>(null)

const {
  dialogScheme,
  drawerScheme,
  searchSchema,
  tableColumns,
  userRoleSearchScheme,
  userRoleTableScheme,
  recycleBinTableColumns
} = useSchema()

const {
  dialogModel,
  dialogVisible,
  roleDialogVisible,
  loading,
  searchModel,
  tableModel,
  drawerVisible,
  userRoleSearchModel,
  userRoleTableModel,
  departTree,
  departCheckedItems,
  recycleBinDialogVisible,
  recycleBinTableModel,
  openDialog,
  page,
  reset,
  pageChange,
  closeDialog,
  addOrUpdate,
  deleteByIds,
  status,
  openUserRoleDialog,
  closeUserRoleDialog,
  listUserRoles,
  resetUserRole,
  updateUserRole,
  openRecycleBinDialog,
  closeRecycleBinDialog,
  restore,
  deleteCompletely,
  recycleBinPageChange
} = useUserCrud()

const confirm = () => {
  dialogFormRef.value?.validate().then(isPass => {
    if (isPass) {
      addOrUpdate()
    } else {
      console.error("表单校验未通过")
    }
  })
}

onMounted(() => {
  page()
})
</script>

<template>
  <t-form :schema="searchSchema" v-model="searchModel">
    <template #operate>
      <div class="search-operate">
        <t-btn icon="search" type="primary" @click="page">搜 索</t-btn>
        <t-btn icon="reset" ghost @click="reset">重 置</t-btn>
      </div>
    </template>
  </t-form>

  <t-table :columns="tableColumns"
           :data="tableModel.records"
           :loading="loading">
    <template v-slot:header>
      <t-btn icon="plus" type="success" @click="openDialog(undefined)">新 增</t-btn>
      <t-btn icon="upload">导 入</t-btn>
      <t-btn icon="download">导 出</t-btn>
      <t-btn icon="recycle-bin" ghost @click="openRecycleBinDialog">回收站</t-btn>
    </template>

    <template v-slot:status="{row}">
      <t-switch v-model="row.status"
                :active-value="1" :inactive-value="2"
                @switch-change="(newValue:number) => status(row.id, newValue)"/>
    </template>

    <template v-slot:operate="{row}">
      <t-btn text pageSize="small" @click="openUserRoleDialog(row.id)">角色</t-btn>
      <t-btn text pageSize="small" type="success" @click="openDialog(row)">编辑</t-btn>
      <t-btn text pageSize="small" type="danger" @click="deleteByIds([row.id])">删除</t-btn>
    </template>

    <template v-slot:footer>
      <t-pagination :pageNo="tableModel.pageNo" :pageSize="tableModel.pageSize" :total="tableModel.total"
                    @showSizeChange="pageChange" @change="pageChange"/>
    </template>
  </t-table>

  <!-- 新增的弹出框 -->
  <t-dialog :visible="dialogVisible" :title="dialogModel.id ? '编辑' : '新增'" @close="closeDialog" @confirm="confirm">
    <t-form ref="dialogFormRef" :schema="dialogScheme" v-model="dialogModel">
      <template #avatar>
        <div class="user-avatar">
          <span style="visibility: hidden">头像</span>
          <t-image src="http://localhost:9876/ytor/sys/file/download?fileId=MCPS8A6V-CS0dfG"/>
        </div>
      </template>

      <template #depart>
        <t-tree-select v-model="departCheckedItems" :data="departTree" label="部　门"/>
      </template>
    </t-form>
  </t-dialog>

  <!-- 编辑的drawer -->
  <t-drawer v-model:visible="drawerVisible" title="编辑用户" size="25%" @close="closeDialog" @confirm="confirm">
    <t-form ref="dialogFormRef" :schema="drawerScheme" v-model="dialogModel">
      <template #depart>
        <t-tree-select v-model="departCheckedItems" :data="departTree" label="部　门"/>
      </template>
    </t-form>
  </t-drawer>

  <!-- 角色分配的弹出框 -->
  <t-dialog :visible="roleDialogVisible" title="分配角色" width="1000px"
            @close="closeUserRoleDialog" @confirm="closeUserRoleDialog">
    <t-form :schema="userRoleSearchScheme" v-model="userRoleSearchModel" :label-width="60">
      <!-- 角色部门 -->
      <template #depart>
        <t-tree-select v-model="departCheckedItems" :data="departTree" label="部　门"/>
      </template>
      <!-- 操作 -->
      <template #operate>
        <div class="search-operate">
          <t-btn @click="listUserRoles">搜 索</t-btn>
          <t-btn ghost @click="resetUserRole">重 置</t-btn>
        </div>
      </template>
    </t-form>

    <t-table :columns="userRoleTableScheme" :data="userRoleTableModel.data" height="200px">
      <!-- 角色类型 -->
      <template v-slot:roleType="{row}">
        <t-tag v-if="row.roleType === 1" type="primary" :code="row.id" label="系统角色"/>
        <t-tag v-if="row.roleType === 2" type="success" :code="row.id" label="部门角色"/>
      </template>
      <!-- 操作 -->
      <template v-slot:status="{row}">
        <t-switch :modelValue="row.userId === userRoleTableModel.currentUserId"
                  @update:modelValue="() => updateUserRole(row.roleId)"/>
      </template>
    </t-table>

  </t-dialog>

  <!-- 回收站 -->
  <t-dialog :visible="recycleBinDialogVisible" title="回收站" width="1000px" @close="closeRecycleBinDialog"
            @confirm="closeRecycleBinDialog">
    <t-table :columns="recycleBinTableColumns"
             :data="recycleBinTableModel.records"
             :loading="loading">

      <template v-slot:operate="{row}">
        <t-btn text pageSize="small" type="success" @click="restore(row.id)">还原</t-btn>
        <t-btn text pageSize="small" type="danger" @click="deleteCompletely(row.id)">彻底删除</t-btn>
      </template>

      <template v-slot:footer>
        <t-pagination :pageNo="recycleBinTableModel.pageNo" :pageSize="recycleBinTableModel.pageSize"
                      :total="recycleBinTableModel.total"
                      @showSizeChange="recycleBinPageChange" @change="recycleBinPageChange"/>
      </template>
    </t-table>
  </t-dialog>
</template>

<style scoped>
.search-operate {
  display: flex;
}

.user-avatar {
  display: flex;
  height: 135px;
  width: 100%
}
</style>